<template>
    <div class="prove-main" v-if="isuploading">
        <div class="up">
            <div class="upload-back" @click="closeupload">
                <div>返回</div>
            </div>
            上传加分项证明
        </div>
        <div class="middle">
            <div class="name">
              <span class="text">加分项名称</span>
              <input class="input" v-model="actName" autocomplete="off" maxlength="100" >
              <span class="example_tip">例：档案馆助理实践证明</span>
            </div>
            <div class="tip">
              <span class="text">备注（50字以内）</span>
              <textarea class="input" v-model="actTip" maxlength="50"></textarea>
            </div>
        </div>
        <div class="bottom">
            <div class="upload_wrap">
              <div class="touchfield">
                <div class="center">
                  <div class="x"></div>
                  <div class="y"></div>
                </div>
                <span class="text">{{buttoncontent}}</span>
                <input type="file" @change="upload()"
                        ref="inputer" class="fileinput" accept=".jpg,.png,.jpeg,.raw"/>
              </div>
              <img class="img" :src="uploadImg">
            </div>
            <div class="tip">
              <span class="text">
                  {{tipcontent}}
              </span>
            </div>
            <div class="button_wrap" @click="submit()">
                <span class="text">确认提交</span>
            </div>
        </div>
        <submitComponent v-if="isSubmiting" :imgsrc='submitpicture' imgwidth='147' imgheight='101' title='是否确认提交？' content='确认后不可更改。' @closetip_ensure="closeEnsureAndDoFunction($event)"
                 @closetip_cancel="closeEnsure($event)"></submitComponent>
    </div>
    <div class="prove-main white" v-else>
      <div class="up">
          <div id="success-back" @click="closeupload">
              <img src='../../../assets/img/icon/personal_homepage_btn_bac.svg'>
              <div>
                返回主界面
              </div>
          </div>
      </div>
      <div class="success-middle">
        <div class="success-img_wrap">
          <img src="../../../assets/img/icon/icon_green.svg">
        </div>
        <div class="success-tip_wrap">
          <span class="success-text">上传成功！</span>
        </div>
      </div>
      <div class="success-bottom">
        <div class="success-left"  @click="cointinueUpload">
            <span class="success-text">继续上传</span>
            <img  class="success-icon" src="../../../assets/img/icon/enter_blue.svg">
        </div>
        <div class="success-right" @click="lookUncheckList">
            <img  class="success-icon" src="../../../assets/img/icon/enter_green.svg">
            <span class="success-text">查看未审核</span>
        </div>
      </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import uploadImg from '../../../assets/img/icon/upload_image.svg'
import submitComponent from '../../../components/public/tip_yesorno'
import submitpicture from '../../../assets/img/pluto-done-1.svg'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    submitComponent
  },
  data () {
    // 这里存放数据
    return {
      submitpicture,
      actName: '',
      actTip: '',
      isSubmiting: false,
      isuploading: true,
      tipcontent: '备注：请上传证明材料(不大于5M的图片，格式为jpg/png/jpeg/raw)，并确保材料清晰度高，以便后续材料审核。',
      uploadedimgjson: null,
      buttoncontent: '请点击上传图片',
      uploadImg,
      file: null
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    file () {
      if (this.file == null) {
        this.buttoncontent = '点击上传图片'
      } else {
        this.buttoncontent = this.file.name
      }
    }
  },
  // 方法集合
  methods: {
    async upload () {
      let inputDOM = this.$refs.inputer
      if (!inputDOM.files) {
        return
      }
      let file = inputDOM.files[0]
      let ImgList = ['jpg', 'png', 'jpeg', 'raw']
      const lastname = file.name.split('.').pop()
      var yesOrNo = false
      for (var i = 0; i < ImgList.length; i++) {
        if (lastname === ImgList[i]) {
          yesOrNo = true
        }
      }
      if (yesOrNo === false) {
        return
      }
      let filesize = file.size / 1024 / 1024
      if (filesize > 5) {
        // alert('文件过大！请上传小于5M的图片！')
        return
      }
      this.file = file
      // console.log('上传图片')
    },
    submit () {
    // 不能用幕布了,fixed和z-index的关系
      if (this.actName.length < 1) {
        alert('请填写加分项名称！')
        return
      }
      if (this.actTip.length > 50) {
        alert('备注信息不超过50个字！')
        return
      }
      if (this.file == null) {
        alert('请上传图片！')
        return
      }
      this.isSubmiting = true
      // console.log(this.isSubmiting)
    },
    async closeEnsureAndDoFunction () {
      let formData = new FormData()
      formData.append('otherActName', this.actName)
      formData.append('additionalBasis', this.actTip)
      formData.append('activityImage', this.file)
      let student = this.$store.state.Student
      formData.append('studentId', student.studentid)
      formData.append('college', student.collegename)
      let result = await this.$axios({
        url: '/studentevaluation/api/otheract/uploadOtherAct',
        method: 'post',
        data: formData,
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        async: false,
        cache: false,
        contentType: false,
        processData: false
      })
      result = result.data
      if (result.data !== 1) {
        alert('您已上传过该活动')
        this.actName = ''
        this.actTip = ''
        this.file = null
        this.isSubmiting = false
        return
      }
      this.isSubmiting = false
      this.isuploading = false
    },
    closeEnsure () {
    //   this.$store.commit('changeCoverState', false)
      this.isSubmiting = false
    },
    closeupload () {
      this.$emit('closeupload')
    },
    cointinueUpload () {
      this.actName = ''
      this.actTip = ''
      this.file = null
      this.isuploading = true
    },
    lookUncheckList () {
      this.$router.push('/stbaseurl/file')
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang="scss" scoped>
.white {
  background-color: #fff !important;
  font-family:PingFang SC;
}
#success-back {
  font-weight:400;
  position: absolute;
  left: px2rem(20);
  width: px2rem(88);
  font-size: px2rem(14);
  height: px2rem(44);
  display: flex;
  justify-content: start;
  img {
    height: px2rem(44);
    width: px2rem(46);
  }
  div {
    position: absolute;
    left: px2rem(18);
    width: px2rem(70);
    height: px2rem(44);
    text-align: end;
  }
}
.prove-main .up {
    height: px2rem(44);
    font-size:px2rem(18);
    font-family:PingFang SC;
    font-weight:bold;
    line-height:px2rem(44);
    text-align: center;
    color:rgba(38,38,38,1);
    background-color: #fff;
    .upload-back {
        font-weight:400;
        position: absolute;
        left: px2rem(20);
        width: px2rem(74);
        height: px2rem(44);
        display: flex;
        align-items: center;
        font-size:px2rem(14);
        div {
            text-align: end;
            width: px2rem(46);
            height: px2rem(44);
            background: url('../../../assets/img/icon/personal_homepage_btn_bac.svg') no-repeat;
            background-size: 100% 100%;
        }

    }
}
.prove-main{
  position: fixed;
  z-index: 50;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: px2rem(20);
  line-height: px2rem(20);
  overflow: auto;
  background-color: $background-color;
  @mixin text_tip{
    height: px2rem(17);
    line-height:px2rem(17);
    font-size: $text-size-small;
    color: #666666;
  }
  .fileinput{
    width: 200px;
    height: 200px;
    border: 2px solid red;
    opacity: 0.5;
  }
  .middle{
    @mixin text_title{
      height: px2rem(25);
      line-height:px2rem(25);
      font-size: $text-size-imp;
      font-weight: bold;
      color: #666666;
    }
    @mixin text_input{
      border-radius: px2rem(4);
      border: 0;
      background-color: #FFF;
      color: $text-color;
      font-size: $text-size-normal;
    }
    .name{
      width: 80%;
      height: px2rem(89);
      margin: px2rem(22) auto 0;
      /*border: px2rem(1) solid red;*/
      .text{
        @include text_title
      }
      .input{
        @include text_input;
        width: calc(100% - #{px2rem(8)});
        height: px2rem(36);
        line-height: px2rem(36);
        margin: px2rem(6) 0 px2rem(5) 0;
        padding: 0 px2rem(8);
      }
      .example_tip{
        @include text_tip;
      }
    }
    .tip{
      width: 80%;
      height: px2rem(139);
      margin: px2rem(20) auto 0;
      /*border: px2rem(2) solid red;*/
      .text {
        @include text_title
      }
      .input {
        @include text_input;
        width: calc(100% - #{px2rem(8)});
        height: px2rem(108);
        margin: px2rem(6) 0 0 0;
        padding: 0 px2rem(8);
        line-height: px2rem(25);
      }
    }
  }
  .bottom{
    .upload_wrap{
      background-color: #DBDBDB;
      width: 80%;
      height: px2rem(108);
      margin: px2rem(34) auto 0;
      border-radius: px2rem(4);
      text-align: center;
      position: relative;
      border: px2rem(1) solid transparent;
      .img {
        width: px2rem(105);
        height: px2rem(89);
        position: absolute;
        top: px2rem(9);
        left: 45%;
        z-index: 1;
      }
      .touchfield{
        width: px2rem(105);
        height: px2rem(75);
        /*border: px2rem(2) solid red;*/
        margin: px2rem(21) auto 0;
        position: relative;
        z-index: 2;
        .center {
          width: px2rem(46);
          height: px2rem(46);
          /*border: px2rem(2) solid red;*/
          margin: 0 auto px2rem(7);
          position: relative;
          @mixin xy{
            border-radius: px2rem(2);
            position: absolute;
            background-color: #666666;
          }
          .x {
            @include xy;
            width: px2rem(46);
            height: px2rem(4);
            top: px2rem(21);
            left: 0;
          }
          .y {
            @include xy;
            width: px2rem(4);
            height: px2rem(46);
            top: 0;
            left: px2rem(21);
          }
        }
        .text{
          display: block;
          width: 100%;
          text-align: center;
          height: px2rem(20);
          line-height: px2rem(20);
          font-size: px2rem(14);
          font-weight: bold;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;/*文字隐藏后添加省略号*/
        }
        .fileinput{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          /*border: 2px solid black;*/
          opacity: 0;
        }
      }

    }
    .tip{
      margin: px2rem(5) auto 0;
      width: 80%;
      .text{
        @include text_tip;
      }
    }
    .button_wrap {
      width: 80%;
      height: px2rem(44);
      margin: px2rem(20) auto 0;
      border-radius: px2rem(24);
      background: -webkit-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* 标准的语法 */
      text-align: center;
      .text{
        line-height: px2rem(44);
        font-size: $text-size-imp;
        color: #FFF;
        margin: 0 auto;
        /*border: px2rem(2) solid red;*/
      }
    }
  }
}

.success-middle {
    width: 100%;
    height: px2rem(148);
    background-color: #FFF;
    .success-img_wrap{
      width: 100%;
      height: px2rem(80);
      /*border: px2rem(2) solid red;*/
      margin-top: px2rem(115);
      text-align: center;
      img{
        width: px2rem(80);
        height: px2rem(80);
      }
    }
    .success-tip_wrap{
      width: 80%;
      height: px2rem(40);
      line-height: px2rem(40);
      /*border: px2rem(2) solid red;*/
      margin: px2rem(28) auto 0;
      text-align: center;
      .success-text{
        font-size: px2rem(28);
        font-weight: bold;
        color: $text-color;
      }
    }
  }
  .success-bottom{
    width: 85%;
    height: px2rem(46);
    background-color: #FFF;
    margin: px2rem(29) auto 0;
    @mixin wrap{
      width: px2rem(100);
      height: px2rem(46);
      line-height: px2rem(46);
      /*border: px2rem(1) solid red;*/
    }
    @mixin icon{
      display: block;
      width: px2rem(12);
      height: px2rem(20);
      /*border: px2rem(2) solid red;*/
      margin-top: px2rem(13);
    }
    .success-left{
      @include wrap;
      float: left;
      .success-text{
        float: left;
        font-size: $text-size-normal;
        color: #1270E3;
        /*border: px2rem(2) solid red;*/
      }
      .success-icon {
        @include icon;
        float: left;
      }
    }
    .success-right {
      @include wrap;
      float: right;
      .success-text {
        float: right;
        font-size: $text-size-normal;
        color: #5ECC49;
        /*border: px2rem(2) solid red;*/
      }
      .success-icon {
        @include icon;
        float: right;
      }
    }
  }
</style>
